<div nz-row [nzGutter]="8" [nzType]="'flex'" [nzAlign]="'middle'">
  <div nz-col [nzSpan]="8" [nzOffset]="8">
    <nz-card [nzTitle]="'注册'">
      <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
        <!--邮箱-->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="email" [nzRequired]="true">邮箱</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzHasFeedback]="true">
            <input nz-input formControlName="email" id="email" title="">
            <nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">
              请输入正确的邮箱！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <!--昵称-->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzRequired]="true" [nzFor]="username">昵称</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzHasFeedback]="true">
            <input nz-input formControlName="username" id="username" title="">
            <nz-form-explain
              *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">请输入您的昵称！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <!--手机号码-->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzRequired]="true" [nzFor]="phone_number">手机号码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzHasFeedback]="true"
                           [nzValidateStatus]="validateForm.controls['phone_number']">
            <nz-input-group>
              <input nz-input formControlName="phone_number" id="phone_number" title="">
            </nz-input-group>
            <nz-form-explain
              *ngIf="getFormControl('phone_number').dirty&&getFormControl('phone_number').hasError('required')">
              请输入您的手机号码！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <!--密码-->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="password" [nzRequired]="true">密码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzHasFeedback]="true">
            <input nz-input formControlName="password" type="password" id="password" title=""
                   (ngModelChange)="updateConfirmValidator()">
            <nz-form-explain
              *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入您的密码！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <!--确认密码-->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzRequired]="true" [nzFor]="checkPassword">确认密码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" [nzHasFeedback]="true">
            <input nz-input formControlName="checkPassword" type="password" title="" id="checkPassword">
            <nz-form-explain
              *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">
              请确认您的密码！
            </nz-form-explain>
            <nz-form-explain
              *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">
              您输入的两个密码不一致！
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!--用户协议-->
        <nz-form-item style="margin-bottom:8px;">
          <nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
            <label nz-checkbox [formControlName]="'agree'">
                <span>我已阅读
                  <a>用户协议</a>
                </span>
            </label>
            <nz-form-explain *ngIf="getFormControl('agree').dirty&&getFormControl('agree').hasError('required')">
              请您确认用户协议
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="margin-bottom:8px;">
          <nz-form-control [nzSpan]="14" [nzOffset]="6">
            <button nz-button class="register-form-button" [nzSize]="'large'" [nzType]="'primary'">注册</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-card>
  </div>
</div>
<nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()" (nzOnOk)="login()">
  <ng-template #modalTitle>
    <span><i class="anticon anticon-check-circle" style="color: darkgreen;"></i> 注册成功</span>
  </ng-template>
  <p>注册成功，立即登录？</p>
</nz-modal>
